<template>
	<div class="flex flex-col">
		<el-select v-model="office" placeholder="" clearable filterable @change="">
			<el-option v-for="item in optionsOffice" :key="item.value" :label="item.label" :value="item.value"> </el-option>
		</el-select>

		<vue-office-docx :src="docx" style="height: 80vh" @rendered="renderedHandler" @error="errorHandler" v-if="office === 'docx'" />
		<vue-office-excel
			:src="excel"
			:options="options"
			style="height: 80vh"
			@rendered="renderedHandler"
			@error="errorHandler"
			v-if="office === 'excel'"
		/>

		<PDFView :pdfUrl="pdfSrc" v-if="office === 'pdf'" />
	</div>
	<!-- <el-upload
    :limit="1"
    :file-list="fileList"
    accept=".docx"
    :beforeUpload="beforeUpload"
    action=""
    style="padding: 80px"
  >
    <el-button size="small" type="warning">点击上传</el-button>
  </el-upload> -->
	<!-- <vue-office-docx :src="src" v-if="src" /> -->
</template>

<script lang="ts" setup>
import { ref } from 'vue';

//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx';
//引入VueOfficeExcel组件
import VueOfficeExcel from '@vue-office/excel';
//引入相关样式
import '@vue-office/docx/lib/index.css';
//引入相关样式
import '@vue-office/excel/lib/index.css';

//引入pdf组件
import PDFView from './components/pdfPreview.vue';

import type { UploadProps, UploadUserFile } from 'element-plus';

const optionsOffice = [
	{ value: 'docx', label: 'docx' },
	{ value: 'excel', label: 'excel' },
	{ value: 'pdf', label: 'pdf' },
];
const office = ref<string>('docx');

const docx = ref<string>('http://static.shanhuxueyuan.com/test6.docx');
const renderedHandler = (): void => {
	console.log('渲染完成');
};
const errorHandler = (): void => {
	console.log('渲染失败');
};

const src = ref<string | ArrayBuffer>('');
const fileList = ref<UploadUserFile[]>([]);
const beforeUpload: UploadProps['beforeUpload'] = (file) => {
	let reader = new FileReader();

	reader.readAsArrayBuffer(file);
	reader.onload = (loadEvent) => {
		let arrayBuffer = loadEvent.target?.result;
		src.value = arrayBuffer || '';
	};
	return false;
};

const excel = ref<string>('http://static.shanhuxueyuan.com/demo/excel.xlsx');
const options = ref({
	xls: false, //预览xlsx文件设为false；预览xls文件设为true
	minColLength: 0, // excel最少渲染多少列，如果想实现xlsx文件内容有几列，就渲染几列，可以将此值设置为0.
	minRowLength: 0, // excel最少渲染多少行，如果想实现根据xlsx实际函数渲染，可以将此值设置为0.
	widthOffset: 10, //如果渲染出来的结果感觉单元格宽度不够，可以在默认渲染的列表宽度上再加 Npx宽
	heightOffset: 10, //在默认渲染的列表高度上再加 Npx高
	beforeTransformData: (workbookData: any) => {
		return workbookData;
	}, //底层通过exceljs获取excel文件内容，通过该钩子函数，可以对获取的excel文件内容进行修改，比如某个单元格的数据显示不正确，可以在此自行修改每个单元格的value值。
	transformData: (workbookData: any) => {
		return workbookData;
	}, //将获取到的excel数据进行处理之后且渲染到页面之前，可通过transformData对即将渲染的数据及样式进行修改，此时每个单元格的text值就是即将渲染到页面上的内容
});

const pdfSrc = ref<string>('https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf');
</script>
